<template>
    <div class="search flex flexv">
        <!-- 头部 -->
        <div class="search-head flex">
            <div class="back" @click="back"></div>
            <div class="flex1 flexc search-box">
                <input type="text" class="flex1" v-model="words" placeholder="请输入关键词搜索">
            </div>
            <div class="search-head-btn click tc bold" @click="search">搜索</div>
        </div>
        <!-- 占位符 -->
        <div class="head-space"></div>

        <!-- 关键词为空 -->
        <div v-if="!inited">

            <!-- 历史记录 -->
            <div class="history-btns flex flexv" v-if="hasHis">
                <div class="history-head flex jus-b">
                    <p class="name bold">历史记录</p>
                    <div class="delete flex click" @click="clear">
                        <img src="@/assets/delete-ico.png" alt="">
                    </div>

                </div>
                <!-- 记录 -->
                <ul class="histories flex flex-wrap">
                    <li class="flex" v-for="item in histories" :key="item.id">
                        <router-link :to="'/result/' + item.search_name" class="flex1 tc">{{item.search_name}}</router-link>
                    </li>
                </ul>
            </div>


            <!-- 热门搜索 -->
            <div class="history-btns flex flexv">
                <div class="history-head flex jus-b">
                    <p class="name bold">热门搜索</p>
                </div>
                <!-- 记录 -->
                <ul class="histories flex flex-wrap">
                    <li class="flex" v-for="item in hots" :key="item.id">
                        <router-link :to="'/result/' + item.search_name" class="flex1 tc">{{item.search_name}}</router-link>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 非空已输入 -->
        <ul class="words-lists flex flexv" v-else>
        </ul>



    </div>
</template>
<script>
import Vue from 'vue';
import { Search, ClearHis } from '@/request/api';
import { Dialog, Toast } from 'vant'; 

export default {
    data(){
        return{
            words: null, // 搜索关键词
            histories: [], // 历史记录列表
            hots: [], // 热门搜索列表
            hasHis: false, // 历史记录
            inited: false, // 是否输入关键词
        }
    },
    created(){
        this.$loading('请稍后...');
        Search({
            token:localStorage.getItem('token')
        }).then(res => {
            if (res.code == 1) {
                Toast.clear();
                const data = res.data;
                if (data.history.length > 0) {
                    this.hasHis = true;
                    this.histories = data.history;
                }
                this.hots = data.hotkey;
            } else {
                Toast.clear();
                this.$tip(res.msg)
            }
        })
    },
    watch: {
        words(oldVal, newVal){
            if (this.words) {
                this.inited = true;
            } else {
                this.inited = false;
            }
        }
    },
    methods: {
        // 返回
        back(){
            this.$router.go(-1)
        },
        // 搜索
        search(){
            if (!this.words) {this.$tip('请输入需要搜索的关键字');return;}
            this.$router.push('/result/' + this.words);
        },
        // 清除历史记录
        clear(){
            Dialog.confirm({
                title: '确定清除历史记录吗？',
            }).then(()=>{
                ClearHis({
                   token:localStorage.getItem('token')
                }).then(res => {
                    if (res.code == 1) {
                        Toast.clear();
                        this.hasHis = false;
                        this.histories = []
                        this.$tip(res.msg)
                    } else {
                        Toast.clear();
                        this.$tip(res.msg)
                    }
                })
            }).catch(() => {

            })
        },
    },
}
</script>
<style lang="less" scoped>
.search{
    min-height: 100vh;
    background-color: #fff;
    // 头部
    .search-head{
        width: 100%;
        max-width: 750px;
        height: 0.88rem;
        margin: auto;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        border-bottom: 1px solid #dcdcdc;
        .back{
            width: 0.88rem;
            height: 100%;
            background: url('~@/assets/back-ico.png') no-repeat center;
            background-size: 0.2rem 0.35rem;
        }
        .search-box{
            position: relative;
            input{
                width: 100%;
                height: 0.6rem;
                padding-left: 0.3rem;
                // padding-left: 0.4rem;
                border-radius: 0.3rem;
                overflow: hidden;
                font-size: 0.28rem;
                line-height: 0.6rem;
                color: #333;
                background-color: #f5f5f5;
                caret-color:#1e88da;
            }
        }
        .search-head-btn{
            width: 1.1rem;
            height: 0.88rem;
            font-size: 0.28rem;
            line-height: 0.88rem;
            color: #333;
        }
    }
    // 占位符
    .head-space{
        width: 100%;
        height: 0.88rem;
    }
    // 历史记录
    .history-btns{
        width: 100%;
        height: auto;
        padding: 0.28rem;
        .history-head{
            height: 0.42rem;
            .name{
                font-size: 0.28rem;
                line-height: 0.42rem;
                color: #333;
            }
            .delete{
                img{
                    width: 0.34rem;
                    height: 0.34rem;
                    margin: auto 0;
                }
            }
        }
        .histories{
            li{
                height: 0.52rem;
                margin: 0.2rem 0.2rem 0 0;
                padding: 0 0.26rem;
                border-radius: 0.26rem;
                font-size: 0.26rem;
                line-height: 0.52rem;
                background-color: #f5f5f5;
            }
        }
    }
    // 关键词非空
    .words-lists{
        width: 100%;
        height: auto;
        background-color: #fff;
        li{
            height: 0.88rem;
            padding: 0 0.28rem;
            border-bottom: 1px solid #efefef;
            .jus-b{
                .text{
                    font-size: 0.28rem;
                    line-height: 0.88rem;
                    color: #333;
                }
                .to{
                    width: 0.24rem;
                    height: 0.24rem;
                    margin: auto 0;
                    background: url('~@/assets/search-to.png') no-repeat center;
                    background-size: 0.24rem;
                }
            }
        }
    }
}
</style>
